import React, { useState, useEffect } from 'react';
import services from '../../../../services/api';
import PolicyAdd from '../add';
import { Tabs } from 'antd';

/**
 * @method VersionCompare
 * @param {string} strategy_id
 * @param {number} version
 */

export default function VersionCompare(props) {
  const [beforeContent, setBeforeContent] = useState({});
  const [afterContent, setAfterContent] = useState({});

  useEffect(() => {
    async function fetchData() {
      const before = await getDetail(props.strategy_id, props.version);
      const after = await getDetail(props.strategy_id);
      setBeforeContent(before);
      setAfterContent(after);
    }
    fetchData();
  }, []);

  // 获取详情
  async function getDetail(id, version) {
    const res = await services.strategyFlow.queryOne({ strategy_id: id, version });
    if (res.code === 0) {
      return res.data;
    } else {
      return null;
    }
  }
  return (
    <div>
      <div className='stretegy-content'>
        <div>
          请注意，存在修改操作的内容为<span style={{ color: '#006eff' }}>蓝色字体</span>，存在删除操作的内容为
          <span style={{ color: '#e54545' }}>红色字体</span>
          <Tabs style={{ width: '100%', margin: '10px 0' }} defaultActiveKey='1'>
            <Tabs.TabPane tab={'当前版本数据'} key='1'>
              {afterContent && Object.keys(afterContent).length > 0 && (
                <PolicyAdd
                  value={afterContent || {}}
                  compareData={beforeContent || {}}
                  actionType='detail'
                  isOld={false}
                  isCompare={true}
                />
              )}
            </Tabs.TabPane>
            <Tabs.TabPane tab={props.version + '版本数据'} key='2'>
              {beforeContent && Object.keys(beforeContent).length > 0 && (
                <PolicyAdd
                  value={beforeContent || {}}
                  compareData={afterContent || {}}
                  actionType='detail'
                  isOld={true}
                  isCompare={true}
                />
              )}
            </Tabs.TabPane>
          </Tabs>
        </div>
      </div>
    </div>
  );
}
